<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";
import Player from "xgplayer";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);

import "xgplayer/dist/index.min.css";



const online_list1 = ref([
    {
      id: "1",
      title: '轻松锁定长期营收',
      subTitle: "您无需费神管理用户支付信息和周期，便可向顾客提供周期性、无打扰的支付体验。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/subscribe-icon-income.cb4d4cbd.svg'
    },
    { 
      id: "2",
      title: '兼顾安全性与便捷',
      subTitle: "蚂蚁风控科技为交易安全保驾护航，保障用户信息的隐私安全、减少支付流程的核身打扰。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/subscribe-icon-safe.1f635109.svg'
    },
    { 
      id: "3",
      title: '叠加营销资源',
      subTitle: "可灵活搭配营销活动，激励顾客开通订阅支付。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/subscribe-icon-resource.d92d73df.svg'
    },
 ])


/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};


onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();

  new Player({
    id: "mse", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    autoplay: true, //自动播放
    screenShot: false, // 开启截图功能
    loop: true,
    fullscreen: true,
    //视频地址
    url: 'https://gw.alipayobjects.com/v/huamei_pwpjvv/afts/video/A*bflcSIDuyFQAAAAAAAAAAAAADmesAQ',

    //封面图
    poster: 'https://gw.alipayobjects.com/v/huamei_pwpjvv/afts/video/A*BB_xTLlbRvQAAAAAAAAAAAAADmesAQ',
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
  });
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*cdx4Tog2E9AAAAAAAAAAAAAADmesAQ/original',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*zOPGRLWX6fgAAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})

</script>

<template>
  <v-app>
    <!-- 主图-->
    <banner-main
      :lists="carousel_Images"
      :lists_bottom="online_list1"
      title="订阅" 
      subTitle="按顾客约定的扣款周期自动发起代扣，留取长期、稳定的收入。"
     ></banner-main>

    <div class="w-full bg-[#f0f0f0] d-flex text-center py-40 ">
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <div class="">
            <v-img width="700px" height="451px" cover src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/subscribe-icon-calendar.1573364c.svg"/>
          </div>
          <div class="mx-auto w-6/12 d-flex flex-column ">
            <span class="text-left text-[32px] font-bold">获得稳定营收</span>
            <span class="text-left text-[20px] mt-10">在您的收银台页面发起订阅绑定，将一次付款转化为长期交易。</span>
          </div>

        </div>
        <div class="w-6/12">
            <div id="mse"></div>
        </div>
    </div>
    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>
    .activeClass {
        @apply bg-[#1677ff] font-bold text-white rounded-[40px]
    }

    :deep(.xgplayer-controls.controls-autohide) {
        display: none;
    }
    :deep(video) {
        width: 100%;
        height: 100%;
        object-fit: fill; /* 或者使用 contain，根据需求选择 */
    }
</style>